<nz-card class="m-b-2">
  <!-- seach START -->
  <div class="seach-wrap">
    <div class="seach-lf">
      <button nz-button nzType="primary" (click)="showModal()"
              *ngIf="permission.userPermission.has('config:configDict:add')">新增字典
      </button>
    </div>

    <div nz-space class="seach-rt">
      <div *nzSpaceItem class="seach-item">
        <div class="seach-control">
          <input type="text" nz-input placeholder="请输入名称或编码" [(ngModel)]="query_params_Json.name"/>
        </div>
      </div>

      <div *nzSpaceItem class="seach-item">
        <button nz-button nzType="primary" (click)="query()" class="m-r-8">查询</button>
        <button nz-button nzType="default" (click)="backList()">重置</button>
      </div>
    </div>
  </div>
  <!-- seach END -->
</nz-card>

<nz-card>
  <main class="pagination-wrap-position">
    <div class="table-wrap">
      <nz-table
        #basicTable
        nzSize="small"
        nzShowSizeChanger
        nzShowQuickJumper
        nzOuterBordered
        [nzScroll]="{ x: '1100px' }"
        [nzFrontPagination]="false"
        [nzLoadingDelay]="100"
        [nzLoading]="tableLoading"
        [nzData]="listOfData?.records"
        [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
        [nzTotal]="listOfData?.total"
        [nzPageIndex]="listOfData?.current"
        [nzPageSize]="listOfData?.size"
        [nzShowTotal]="totalTemplate"
        (nzPageIndexChange)="onPageIndexChange($event)"
        (nzPageSizeChange)="onPageSizeChange($event)"
      >
        <thead>
        <tr>
          <th nzAlign="center" nzWidth="120px" nzLeft>ID</th>
          <th nzAlign="center" nzWidth="120px">排序</th>
          <th nzAlign="center" nzWidth="170px">名称</th>
          <th nzAlign="center" nzWidth="220px">编码</th>
          <th nzAlign="center" nzWidth="420px">值</th>
          <th nzAlign="center" nzWidth="120px">上级ID</th>
          <th nzAlign="center" nzWidth="120px">状态</th>
          <th nzAlign="center" nzWidth="140px">权限</th>
          <th nzAlign="center" nzWidth="250px">备注</th>
          <th nzAlign="center" nzWidth="170px">字段1</th>
          <th nzAlign="center" nzWidth="170px">字段2</th>
          <th nzAlign="center" nzWidth="170px">字段3</th>
          <th nzAlign="center" nzWidth="250px">备注</th>
          <th nzAlign="center" nzWidth="250px" nzRight>操作</th>
        </tr>
        </thead>

        <tbody>
        <tr *ngIf="searchHint && basicTable.data">
          <td class="result-wrap" nzAlign="center" colspan="14">
            <span>搜索 “{{searcName}}”，找到&nbsp;{{ listOfData?.total }}&nbsp;条结果</span>
            <a nz-button nzType="link" (click)="backList()">返回原列表</a>
          </td>
        </tr>
        <tr *ngFor="let data of basicTable.data; let index = index;">
          <!-- ID -->
          <td nzAlign="center" nzLeft>{{ data.id }}</td>
          <!-- 排序 -->
          <td nzAlign="center">{{ (data.sort || data.sort == 0) ? data.sort : '-' }}</td>
          <!-- 名称 -->
          <td nzAlign="center" nzBreakWord>{{ data.name }}</td>
          <!-- 编码 -->
          <td nzAlign="center">{{ data.dictKey }}</td>
          <!-- 值 -->
          <td nzAlign="center" nzBreakWord>{{ data.content ? data.content : '-' }}</td>
          <!-- 上级ID -->
          <td nzAlign="center">{{ data.parentKey ? data.parentKey : '-' }}</td>
          <!-- 状态 -->
          <td nzAlign="center">
                            <span [ngStyle]="{'color': data.status == 1 ? '#67C23A' : '#F56C6C'}">
                                {{ data.status == 1 ? '启用' : '禁用' }}
                            </span>
          </td>
          <!-- 权限 -->
          <td nzAlign="center">
                            <span [ngStyle]="{'color': data.optionType == 0 ? '#F56C6C' : '#67C23A'}">
                                {{ data.optionType == 0 ? '不允许删改' : '允许删改' }}
                            </span>
          </td>
          <!-- 备注 -->
          <td nzAlign="center" nzBreakWord>{{ data.remark || '-' }}</td>
          <!-- 字段1 -->
          <td nzAlign="center">{{ data.field1 || '-' }}</td>
          <!-- 字段2 -->
          <td nzAlign="center">{{ data.field2 || '-' }}</td>
          <!-- 字段3 -->
          <td nzAlign="center">{{ data.field3 || '-' }}</td>
          <!-- 备注 -->
          <td nzAlign="center" nzBreakWord>{{ data.remark || '-' }}</td>
          <!-- 操作 -->
          <td nzAlign="center" nzRight>
            <button
              *ngIf="permission.userPermission.has('config:configDict:edit')"
              nz-button
              nzType="link"
              (click)="showModal(data.id)">
              编辑
            </button>
            <button
              *ngIf="permission.userPermission.has('config:configDict:list')"
              nz-button
              nzType="link"
              [routerLink]="['../DictList', { dictKey: data.dictKey }]">
              列表
            </button>
            <a
              *ngIf="permission.userPermission.has('config:configDict:delete')"
              nz-button
              nzType="link"
              nzDanger
              nz-popconfirm
              nzPopconfirmTitle="确认删除吗?"
              [nzIcon]="iconTpl" (nzOnConfirm)="confirm(data.id)">
              删除
            </a>
            <ng-template #iconTpl>
              <i nz-icon nzType="question-circle-o" style="color: red;"></i>
            </ng-template>
          </td>
        </tr>
        </tbody>
      </nz-table>

      <!-- 分页template -->
      <ng-template #totalTemplate let-total>共有 {{ total }} 条</ng-template>
    </div>
  </main>
</nz-card>

<nz-modal [(nzVisible)]="isVisible" nzTitle="属性设置" (nzOnCancel)="handleCancel()" [nzFooter]="null">
  <ng-container *nzModalContent>
    <form nz-form [formGroup]="modalForm" (ngSubmit)="submitForm()">
      <nz-form-item>
        <nz-form-label [nzSpan]="4" nzRequired nzFor="name">属性名</nz-form-label>
        <nz-form-control [nzSpan]="14" nzErrorTip="必填">
          <input nz-input formControlName="name" id="name" [maxLength]="50" placeholder=""/>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSpan]="4" nzRequired nzFor="dictKey">编码</nz-form-label>
        <nz-form-control [nzSpan]="14" nzErrorTip="必填">
          <input nz-input formControlName="dictKey" id="dictKey" [maxLength]="50" placeholder=""/>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSpan]="4">值</nz-form-label>
        <nz-form-control [nzSpan]="14">
          <input nz-input formControlName="content" placeholder=""/>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSpan]="4">字段1</nz-form-label>
        <nz-form-control [nzSpan]="14">
          <input nz-input formControlName="field1" [maxLength]="20" placeholder=""/>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSpan]="4">字段2</nz-form-label>
        <nz-form-control [nzSpan]="14">
          <input nz-input formControlName="field2" [maxLength]="20" placeholder=""/>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSpan]="4">字段3</nz-form-label>
        <nz-form-control [nzSpan]="14">
          <input nz-input formControlName="field3" [maxLength]="20" placeholder=""/>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSpan]="4" nzRequired nzFor="optionType">权限</nz-form-label>
        <nz-form-control [nzSpan]="14">
          <nz-radio-group formControlName="optionType" id="optionType">
            <label nz-radio nzValue="1">允许删改</label>
            <label nz-radio nzValue="0">不允许删改</label>
          </nz-radio-group>
          <i nz-icon nzType="info-circle" nzTheme="outline" nzTooltipTitle="如果不允许删改的话，则字典和对应的列表都无法删除修改"
             nzTooltipPlacement="right" nz-button nz-tooltip></i>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSpan]="4" nzRequired nzFor="status">状态</nz-form-label>
        <nz-form-control [nzSpan]="14">
          <nz-radio-group formControlName="status" id="status">
            <label nz-radio nzValue="1">启用</label>
            <label nz-radio nzValue="0">禁用</label>
          </nz-radio-group>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSpan]="4">排序</nz-form-label>
        <nz-form-control [nzSpan]="14">
          <input nz-input formControlName="sort" [maxLength]="20" placeholder=""/>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSpan]="4">备注</nz-form-label>
        <nz-form-control [nzSpan]="14">
          <textarea rows="4" nz-input [maxLength]="100" formControlName="remark"></textarea>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-control [nzSpan]="8" [nzOffset]="4">
          <button nz-button nzType="primary">保存</button>
        </nz-form-control>
      </nz-form-item>
    </form>
  </ng-container>
</nz-modal>
